<template>
  <div class="home">
    <div class="home_bor">
      <div class="lunbo">
        <div class="block">
          <el-carousel height="450px">
            <el-carousel-item v-for="item in lunbo" :key="item">
              <img class="lunbo_img" :src="item.url">
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>

      <div class="home_right">
        <collect></collect>
      </div>
      <div class="home_br"></div>
      <div class="home_bleft">
          <div class="home_left" v-for="item in bloglist"  :key="item.uid">
            <p class="blog_tit" @click="findBlogByUid(item.uid)">{{item.title}}</p>
            <div class="blog_img" @click="findBlogByUid(item.uid)">
              <img class="blogimg" :src="item.fileUid">
            </div>
            <p class="blog_min_tit" @click="findBlogByUid(item.uid)">{{item.title}}</p>
            <div class="blog_auth">
              <el-link class="blogtag" type="info" icon="el-icon-user-solid">{{item.author}}</el-link>
              <el-link class="blogtag" type="info" icon="el-icon-view">{{item.clickCount}}</el-link>
              <el-link class="blogtag" type="info" icon="el-icon-star-on">{{item.collectCount}}</el-link>
              <el-link class="blogtag" type="info" icon="el-icon-time">{{item.createTime}}</el-link>
            </div>
          </div>
        <el-button type="info" icon="el-icon-more-outline" @click="page()">继续加载</el-button>

      </div>
      <div class="home_bright">
           <div class="home_rig1"> <tagcloud></tagcloud></div>
          <div class="home_rig"><clickcount></clickcount></div>
      </div>
    </div>
  </div>
</template>

<script>
  import tagcloud from '@/components/index/tagcloud';
  import clickcount from '@/components/index/clickcount';
  import collect from '@/components/index/collect';
  import axios from "axios";
export default {
  data() {
    return {
      bloglist : [], //博客列表
      currPage:1,
      pageSize:5,
      newblogs:[],
      lunbo:[
        {
          url:'http://qbub163ca.bkt.clouddn.com/1587008142342.jfif',
        },
        {
          url:'http://qbub163ca.bkt.clouddn.com/1587008142362.jfif',
        },
        {
          url:'http://qbub163ca.bkt.clouddn.com/_20200613092712.png',
        },
        {
          url:'http://qbub163ca.bkt.clouddn.com/_20200613092801.jpg',
        }
      ]
    };
  },
  methods: {
    findBlogByUid:function (uid) {
      this.$router.push('/bloginfo/'+uid);
    },
    page:function () {
      this.currPage++;
      this.findBlog();
    },
    findBlog:function () {
      var _this=this;

      axios.post("/api/blogs/findBlog",{currPage:_this.currPage,pageSize:_this.pageSize}).then(function (res) {
        console.log(res.data)
        _this. bloglist=_this.bloglist.concat(res.data)
      })
    },

  },
  mounted() {
    this.findBlog();
  },
  components:{
    'tagcloud':tagcloud,
    'clickcount':clickcount,
    'collect':collect,
  },
};
</script>

<style>
  .blogtag{
    line-height: 50px;
    float: left;
    margin-right: 10px;
  }
  .blog_auth{
    width: 300px;
    height: 60px;
    float: right;
    margin-right: 110px;
    margin-top: 30px;
  }
  .blog_min_tit{
    font-size: 15px;
    color: #888888;
    float: left;
    margin-left: 50px;
  }
  .blogimg{
    width: 255px;
    height: 155px;
  }
  .blog_img{
    width: 255px;
    height: 155px;
    background-color: #42b983;
    margin-left: 50px;
    float: left;
  }
  .blog_tit{
    font-size: 20px;
    font-weight: 1000;
    margin-left: 50px;
  }
.home {
  background-color: #ebe5e5;
  width: 100%;
  height: 4000px;
}
.home_bor {
  background-color: #ffffff;
  width: 80%;
  height: 4000px;
  margin-left: 10%;
  position: absolute;
  z-index: 2;
}
.lunbo {
  width: 765px;
  height: 450px;
  float: left;
  margin-top: 20px;
  margin-left: 10px;
  position: static;
}
.home_right {
  width: 390px;
  height: 216px;
  float: right;
  margin-top: 10px;
  margin-right: 8px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.home_rig {
  width: 390px;
  height: 760px;
  float: right;
  margin-top: 20px;
  box-shadow: #666 0 0 0.7rem;
}
.home_rig1 {
  width: 390px;
  height: 400px;
  box-shadow: #666 0 0 0.7rem;
  float: right;
  margin-top: 20px;
  padding-left: 30px;
}
.home_br {
  width: 100%;
  height: 5px;
  margin-top: 470px;
}
.home_left {
  width: 765px;
  height: 250px;
  float: left;
  margin-top: 20px;
  box-shadow: #666 0 0 0.7rem;
}
.home_bleft {
  width: 765px;
  height: 1000px;
  position: absolute;
  top: 485px;
  left: 10px;
}
.home_bright{
    width: 390px;
    height: 1000px;
    position: absolute;
    right: 20px;
    top: 485px;
}
.lunbo_img{
  display: inline-block;
height: 455px;
width: 765px;
max-width: 100%;
}
</style>

